import { ref, provide, inject } from 'vue'
import { ElMessage } from 'element-plus'

// 创建一个唯一的key
const courseStoreKey = Symbol('courseStore')

// 初始课程数据
const initialCourses = [
  {
    id: 1,
    title: 'Vue3 实战教程',
    desc: '从入门到精通，掌握Vue3开发技能',
    teacher: '张老师',
    img: 'https://picsum.photos/400/300?random=1',
    students: 1234,
    rating: 4.9,
    level: 'beginner',
    levelText: '入门',
    price: 299,
    tags: ['Vue.js', '前端开发'],
    category: '前端开发'
  },
  {
    id: 2,
    title: 'React 高级教程',
    desc: '深入学习React框架，掌握高级开发技巧',
    teacher: '李老师',
    img: 'https://picsum.photos/400/300?random=2',
    students: 2345,
    rating: 4.8,
    level: 'intermediate',
    levelText: '中级',
    price: 399,
    tags: ['React', '前端开发'],
    category: '前端开发'
  },
  {
    id: 3,
    title: 'Node.js 后端开发',
    desc: '使用Node.js构建高性能后端服务',
    teacher: '王老师',
    img: 'https://picsum.photos/400/300?random=3',
    students: 3456,
    rating: 4.7,
    level: 'advanced',
    levelText: '高级',
    price: 499,
    tags: ['Node.js', '后端开发'],
    category: '后端开发'
  },
  {
    id: 4,
    title: 'Python 数据分析',
    desc: '使用Python进行数据分析和可视化',
    teacher: '赵老师',
    img: 'https://picsum.photos/400/300?random=4',
    students: 4567,
    rating: 4.6,
    level: 'intermediate',
    levelText: '中级',
    price: 399,
    tags: ['Python', '数据分析'],
    category: '数据分析'
  },
  {
    id: 5,
    title: 'Java 企业级开发',
    desc: 'Java企业级应用开发实战',
    teacher: '钱老师',
    img: 'https://picsum.photos/400/300?random=5',
    students: 5678,
    rating: 4.5,
    level: 'advanced',
    levelText: '高级',
    price: 599,
    tags: ['Java', '后端开发'],
    category: '后端开发'
  },
  {
    id: 6,
    title: 'Flutter 移动开发',
    desc: '使用Flutter开发跨平台移动应用',
    teacher: '孙老师',
    img: 'https://picsum.photos/400/300?random=6',
    students: 6789,
    rating: 4.4,
    level: 'intermediate',
    levelText: '中级',
    price: 449,
    tags: ['Flutter', '移动开发'],
    category: '移动开发'
  },
  {
    id: 7,
    title: 'Docker 容器化部署',
    desc: 'Docker容器化应用部署实战',
    teacher: '周老师',
    img: 'https://picsum.photos/400/300?random=7',
    students: 7890,
    rating: 4.3,
    level: 'advanced',
    levelText: '高级',
    price: 399,
    tags: ['Docker', '运维'],
    category: '运维'
  },
  {
    id: 8,
    title: 'MySQL 数据库优化',
    desc: 'MySQL数据库性能优化实战',
    teacher: '吴老师',
    img: 'https://picsum.photos/400/300?random=8',
    students: 8901,
    rating: 4.2,
    level: 'intermediate',
    levelText: '中级',
    price: 349,
    tags: ['MySQL', '数据库'],
    category: '数据库'
  },
  {
    id: 9,
    title: 'Spring Boot 微服务',
    desc: 'Spring Boot微服务架构实战',
    teacher: '郑老师',
    img: 'https://picsum.photos/400/300?random=9',
    students: 9012,
    rating: 4.1,
    level: 'advanced',
    levelText: '高级',
    price: 499,
    tags: ['Spring Boot', '微服务'],
    category: '后端开发'
  },
  {
    id: 10,
    title: 'Vue.js 组件开发',
    desc: 'Vue.js组件化开发实战',
    teacher: '王老师',
    img: 'https://picsum.photos/400/300?random=10',
    students: 10123,
    rating: 4.0,
    level: 'intermediate',
    levelText: '中级',
    price: 299,
    tags: ['Vue.js', '前端开发'],
    category: '前端开发'
  },
  {
    id: 11,
    title: 'React Native 开发',
    desc: '使用React Native开发移动应用',
    teacher: '李老师',
    img: 'https://picsum.photos/400/300?random=11',
    students: 11234,
    rating: 4.8,
    level: 'advanced',
    levelText: '高级',
    price: 449,
    tags: ['React Native', '移动开发'],
    category: '移动开发'
  },
  {
    id: 12,
    title: 'TypeScript 高级编程',
    desc: 'TypeScript高级编程技巧',
    teacher: '张老师',
    img: 'https://picsum.photos/400/300?random=12',
    students: 12345,
    rating: 4.7,
    level: 'advanced',
    levelText: '高级',
    price: 399,
    tags: ['TypeScript', '前端开发'],
    category: '前端开发'
  }
]

// 创建课程状态管理
export function createCourseStore() {
  const courseList = ref([])
  
  // 获取课程列表
  async function fetchCourseList() {
    try {
      // 从localStorage获取数据，如果没有则使用初始数据
      const stored = localStorage.getItem('courseList')
      if (stored) {
        courseList.value = JSON.parse(stored)
      } else {
        courseList.value = [...initialCourses]
        saveToLocalStorage()
      }
    } catch (error) {
      ElMessage.error('获取课程列表失败')
    }
  }

  // 添加课程
  function addCourse(course) {
    const newCourse = {
      ...course,
      id: Date.now(),
      students: 0,
      rating: 5.0,
      levelText: {
        beginner: '入门',
        intermediate: '中级',
        advanced: '高级'
      }[course.level]
    }
    courseList.value.unshift(newCourse)
    // 保存到localStorage
    saveToLocalStorage()
    return newCourse
  }

  // 更新课程
  function updateCourse(course) {
    const index = courseList.value.findIndex(item => item.id === course.id)
    if (index > -1) {
      courseList.value[index] = { ...course }
      // 保存到localStorage
      saveToLocalStorage()
      return true
    }
    return false
  }

  // 删除课程
  function deleteCourse(courseId) {
    const index = courseList.value.findIndex(item => item.id === courseId)
    if (index > -1) {
      courseList.value.splice(index, 1)
      // 保存到localStorage
      saveToLocalStorage()
      return true
    }
    return false
  }

  // 保存到localStorage
  function saveToLocalStorage() {
    localStorage.setItem('courseList', JSON.stringify(courseList.value))
  }

  // 从localStorage加载
  function loadFromLocalStorage() {
    const stored = localStorage.getItem('courseList')
    if (stored) {
      courseList.value = JSON.parse(stored)
    } else {
      courseList.value = [...initialCourses]
      saveToLocalStorage()
    }
  }

  // 初始化时从localStorage加载
  loadFromLocalStorage()

  return {
    courseList,
    fetchCourseList,
    addCourse,
    updateCourse,
    deleteCourse
  }
}

// 提供课程状态
export function provideCourseStore() {
  const store = createCourseStore()
  provide(courseStoreKey, store)
  return store
}

// 注入课程状态
export function useCourseStore() {
  const store = inject(courseStoreKey)
  if (!store) {
    throw new Error('Course store not provided')
  }
  return store
} 